<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #000; /* 将背景颜色改为黑色 */
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden; /* 隐藏溢出的内容 */
    }

   .container {
      text-align: center;
      background-color: #111; /* 容器背景颜色改为深灰色 */
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* 增加更亮的阴影效果 */
      z-index: 1; /* 设置容器的层级 */
    }

    h1 {
      color: #e74c3c;
      font-size: 48px; /* 增大标题字体大小 */
      margin-bottom: 20px;
      animation: neonFlicker 2s infinite; /* 添加霓虹闪烁动画 */
    }

    p {
      color: #fff; /* 将段落文字颜色改为白色 */
      font-size: 20px; /* 增大段落字体大小 */
      margin-bottom: 10px;
    }

    a {
      color: #3498db;
      text-decoration: none;
      font-size: 20px; /* 增大链接字体大小 */
    }

    a:hover {
      text-decoration: underline;
    }

    /* 新增的霓虹闪烁动画 */
    @keyframes neonFlicker {
      0% {
        color: #ff0000;
        opacity: 1;
      }
      10% {
        color: #00ff00;
        opacity: 0.8;
      }
      20% {
        color: #0000ff;
        opacity: 1;
      }
      30% {
        color: #ffff00;
        opacity: 0.8;
      }
      40% {
        color: #ff00ff;
        opacity: 1;
      }
      50% {
        color: #00ffff;
        opacity: 0.8;
      }
      60% {
        color: #ff0000;
        opacity: 1;
      }
      70% {
        color: #00ff00;
        opacity: 0.8;
      }
      80% {
        color: #0000ff;
        opacity: 1;
      }
      90% {
        color: #ffff00;
        opacity: 0.8;
      }
      100% {
        color: #ff00ff;
        opacity: 1;
      }
    }

    /* 页面正上方的闪烁霓虹大字 */
   .top-message {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 60px;
      font-weight: bold;
      color: #fff;
      animation: neonFlicker 2s infinite; /* 应用相同的霓虹闪烁动画 */
    }
  </style>
</head>

<body>
  <div class="top-message">做不到，气死你!!!</div>
  <div class="container">
    <h1>404 - 页面未找到</h1>
    <p>很抱歉，您访问的页面不存在。</p>
    <p>您可以 <a href="index.html">返回首页</a> 或检查输入的网址是否正确。</p>
  </div>
</body>

</html>